---
title: Form Filling Co-Pilot
description: AssistantSidebar copilot which fills forms for the user
---

## Live Demo

<div className="not-prose h-[700px]">
  <iframe
    title="Form Filling Co-Pilot demo"
    className="h-full w-full border-none"
    src="https://assistant-ui-form-demo.vercel.app/"
  />
</div>

## Overview

The Form Filling Co-Pilot example demonstrates how to create an AI assistant that helps users fill out forms automatically. This pattern is perfect for applications with complex forms where users need assistance with data entry, validation, or completion.

## Features

- **Sidebar Assistant**: AI assistant in a sidebar that can interact with form fields
- **Form Integration**: Direct integration with form inputs and validation
- **Smart Suggestions**: AI-powered suggestions for form completion
- **Real-time Assistance**: Live help as users fill out forms
- **Validation Support**: AI assistance with form validation and error correction
- **Context Awareness**: Assistant understands form structure and requirements

## Usage

To implement a form-filling co-pilot:

1. **Form Setup**: Create your form with proper field identification
2. **Assistant Integration**: Add assistant-ui sidebar component
3. **Field Mapping**: Connect assistant responses to form fields
4. **Validation Logic**: Implement AI-assisted validation and error handling
5. **User Experience**: Design intuitive interaction patterns

## Code

Key implementation aspects:

- **Form Field Access**: Use refs or form libraries to access field values
- **Assistant Context**: Provide form structure and current state to the AI
- **Response Parsing**: Parse AI responses to extract form data
- **Validation Integration**: Connect AI suggestions with form validation
- **User Feedback**: Provide clear feedback on AI actions

The implementation uses React Hook Form integration with assistant-ui for seamless form interaction.
